<template>
  <div class="visualEdit-content">
    <div class="visualEdit-content-left">
      <div id="chartType" ref="chartType" class="tableType">
        <p>图表类型</p>
        <ul class="tableType-list">
          <li v-for="(item,index) in talelist" :key="index" class="tableType-list-item" @click=" chooseTable(index)">
          <img :fit="fit" :src="item.url" :class="tableChoose == index ? 'tableType-list-item-imged' : 'tableType-list-item-img'" ></li>
        </ul>
        <ul class="tableType-list-name">
          <li v-for="(item,index) in talelist" v-show="tableChoose == index" :key="index" class="tableType-list-name-item" >
          <p>{{ item.name }}</p></li>
        </ul>
      </div>
      <div id="indexcolor" ref="indexcolor">指标颜色
      </div>
      <div id="indexshape" ref="indexshape">指标形状</div>
    </div>
    <div class="visualEdit-content-mid">
      <div id="lat" ref="lat">
        维度
        <ul class="x-choose-list">
          <li v-for="(item,index) in lat" :key="index" class="x-choose-list-item">
          <i class="el-icon-circle-plus-outline" @click="chooseLat(index)"/><p>{{ item }}</p></li>
        </ul>
      </div>
      <div id="index" ref="index">指标
        <ul class="x-choose-list">
          <li v-for="(item,i) in indexs" :key="i" class="x-choose-list-item">
          <i class="el-icon-circle-plus-outline" @click="chooseIndex(i)"/><p>{{ item }}</p></li>
        </ul>
      </div>
    </div>
    <div class="visualEdit-content-right">
      <div id="latSelect" ref="latSelect" class="x-choosed-content">
        <ul class="x-choosed-list">
          <p>维度选择</p>
          <li v-for="(item,index) in latChoose" :key="index" class="x-choose-list-item">
          <i class="el-icon-remove-outline" @click="delChooseLat()"/><p>{{ lat[item] }}</p></li>
        </ul>
      </div>
      <div id="indexSelect" ref="indexSelect">
        <ul class="x-choosed-list">
          <p>指标选择</p>
          <li v-for="(item,index) in indexChoose" :key="index" class="x-choose-list-item">
          <i class="el-icon-remove-outline" @click="delChooseIndex()"/><p>{{ indexs[item] }}</p></li>
        </ul>

      </div>
      <div id="editArea" ref="editArea">
        <!--<div id="mychart" ref="mychart" class="dashboard-text">图表展示</div>-->
        <!--<div id="testChart" ref="testChart" class="dashboard-text">图表展示</div>-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ chartName.name }}</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div class="el-card__body">
            <component :test-data="tableData" :index="indexChoose" :lat="latChoose" :is="chartName.component"/>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import { mapGetters } from 'vuex'
import Vue from 'vue'
export default {
  // name: 'TestDataGetInfo',
  // computed: {
  //   ...mapGetters([
  //     'testData'
  //   ])
  // },@/components/echarts/index
  components: {
    stackHistograms: Vue.extend(require('@/components/stackHistograms.vue').default),
    rose: Vue.extend(require('@/components/rose.vue').default),
    barHeng: Vue.extend(require('@/components/bar-heng.vue').default),
    barXiLine: Vue.extend(require('@/components/bar-xi-line.vue').default),
    wordCloud: Vue.extend(require('@/components/word-cloud.vue').default),
    randar: Vue.extend(require('@/components/randar.vue').default),
    oneCircle: Vue.extend(require('@/components/one-circle.vue').default),
    stackLine: Vue.extend(require('@/components/stackLine.vue').default)
  },
  data() {
    return {
      chartName: {
        name: '标签云',
        component: 'stackHistograms'
      },
      tableChoose: -1,
      talelist:
        [
          {
            name: '标签云',
            url: require('@/assets/images/fsux_图表_百分比堆积图.svg'),
            component: 'wordCloud'
          },
          {
            name: '环图',
            url: require('@/assets/images/fsux_图表_环图.svg'),
            component: 'one-circle'
          },
          {
            name: '双轴图',
            url: require('@/assets/images/fsux_图表_双轴图.svg'),
            component: 'bar-xi-line'
          },
          {
            name: '表格',
            url: require('@/assets/images/fsux_图表_表格.svg'),
            component: 'wordCloud'
          },
          {
            name: '饼图',
            url: require('@/assets/images/fsux_图表_饼图.svg'),
            component: 'rose'
          },
          {
            name: '柱状图',
            url: require('@/assets/images/fsux_图表_堆积柱状图(1).svg'),
            component: 'stackLine'
          },
          {
            name: '堆积柱状图',
            url: require('@/assets/images/fsux_图表_堆积柱状图.svg'),
            component: 'stackHistograms'
          },
          {
            name: '雷达图',
            url: require('@/assets/images/fsux_图表_气泡图.svg'),
            component: 'randar'
          },
          {
            name: '散点图',
            url: require('@/assets/images/fsux_图表_散点图.svg'),
            component: 'stackLine'
          },
          {
            name: '玉玦图',
            url: require('@/assets/images/fsux_图表_玉玦图.svg')
          },
          {
            name: '折线图',
            url: require('@/assets/images/fsux_图表_折线图.svg')
          },
          {
            name: '柱状图',
            url: require('@/assets/images/fsux_图表_柱状图(1).svg')
          },
          {
            name: '柱状图',
            url: require('@/assets/images/fsux_图表_柱状图.svg')
          }
        ],
      lat: ['省', '故障类型'],
      indexs: ['申告量', '处理量', '回单量', '成功量'],
      latChoose: [],
      indexChoose: [],
      tableData: [
        { province: '重庆',
          fault: [{ faultName: '网络无法连接',
            index: [{ name: '申告量', data: 123 }, { name: '处理量', data: 109 }, { name: '回单量', data: 100 }, { name: '成功量', data: 99 }] },
          { faultName: '拨号异常',
            index: [{ name: '申告量', data: 534 }, { name: '处理量', data: 511 }, { name: '回单量', data: 510 }, { name: '成功量', data: 599 }] },
          { faultName: '其他故障',
            index: [{ name: '申告量', data: 2134 }, { name: '处理量', data: 2111 }, { name: '回单量', data: 2110 }, { name: '成功量', data: 1199 }] }] },
        { province: '云南',
          fault: [{ faultName: '网络无法连接',
            index: [{ name: '申告量', data: 523 }, { name: '处理量', data: 509 }, { name: '回单量', data: 500 }, { name: '成功量', data: 499 }] },
          { faultName: '拨号异常',
            index: [{ name: '申告量', data: 2934 }, { name: '处理量', data: 2911 }, { name: '回单量', data: 2910 }, { name: '成功量', data: 2899 }] },
          { faultName: '其他故障',
            index: [{ name: '申告量', data: 334 }, { name: '处理量', data: 311 }, { name: '回单量', data: 310 }, { name: '成功量', data: 299 }] }] },
        { province: '广东',
          fault: [{ faultName: '网络无法连接',
            index: [{ name: '申告量', data: 823 }, { name: '处理量', data: 809 }, { name: '回单量', data: 800 }, { name: '成功量', data: 799 }] },
          { faultName: '拨号异常',
            index: [{ name: '申告量', data: 234 }, { name: '处理量', data: 211 }, { name: '回单量', data: 210 }, { name: '成功量', data: 199 }] },
          { faultName: '其他故障',
            index: [{ name: '申告量', data: 934 }, { name: '处理量', data: 911 }, { name: '回单量', data: 910 }, { name: '成功量', data: 899 }] }] }]
    }
  },

  mounted() {
    const temp = []
    const temp2 = []
    this.tableData.map((item, index) => {
      item.fault.map((ind) => {
        temp2.push(item.province + ind.faultName + ind.index[0].name)
        return temp2
      })
    })
    this.tableData.map((item, index) => {
      item.fault.map((ind) => {
        temp.push({
          value: ind.index[0].data,
          name: item.province + ind.faultName + ind.index[0].name
        })
        return temp
      })
    })
    const testChart = echarts.init(this.$refs.testChart)
    testChart.setOption({
      title: {
        text: 'Nightingale Chart',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        left: 'center',
        top: 'bottom',
        // data: [
        //   'rose1',
        //   'rose2',
        //   'rose3',
        //   'rose4',
        //   'rose5',
        //   'rose6',
        //   'rose7',
        //   'rose8'
        // ]
        data: temp2
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Area Mode',
          type: 'pie',
          radius: [20, 140],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: temp
          // data: [
          //   { value: 30, name: 'stackLine 1' },
          //   { value: 28, name: 'stackLine 2' },
          //   { value: 26, name: 'stackLine 3' },
          //   { value: 24, name: 'stackLine 4' },
          //   { value: 22, name: 'stackLine 5' },
          //   { value: 20, name: 'stackLine 6' },
          //   { value: 18, name: 'stackLine 7' },
          //   { value: 16, name: 'stackLine 8' }
          // ]
        }
      ]
    })
    const myChart = echarts.init(this.$refs.mychart)
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.tableData.map(item => {
            return item.province
          })
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: this.tableData[0].fault[0].index[0].name,
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[0].data
          })
        },
        {
          name: this.tableData[0].fault[0].index[1].name,
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[1].data
          })
        },
        {
          name: this.tableData[0].fault[0].index[2].name,
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[2].data
          })
        },
        {
          name: this.tableData[0].fault[0].index[3].name,
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[3].data
          })
        }
      ]
    })
  },
  methods: {
    TestDataGetInfo() {
      this.$store.dispatch('TestDataGetInfo').then(() => {
        console.log('over')
      })
    },
    chooseTable(index) {
      this.chartName.name = this.talelist[index].name
      this.chartName.component = this.talelist[index].component
      this.tableChoose = index
    },
    chooseLat(index) {
      if (!this.latChoose.includes(index)) { this.latChoose.push(index) }
    },
    chooseIndex(index) {
      if (!this.indexChoose.includes(index)) { this.indexChoose.push(index) }
    },
    delChooseLat() {
      this.latChoose.pop()
    },
    delChooseIndex() {
      this.indexChoose.pop()
    },
    showData() {
      const temp = []
      this.tableData.map((item, index) => {
        item.fault.map((ind) => {
          temp.push(item.province + ind.faultName + ind.index[0].name)
          return temp
        })
      })
      console.log('showData', temp)
    },
    showData2() {
      const temp = []
      this.tableData.map((item, index) => {
        item.fault.map((ind) => {
          temp.push({
            value: ind.index[0].data,
            name: item.province + ind.faultName + ind.index[0].name
          })
          return temp
        })
      })
      console.log('showData2', temp)
    }
  }
}
</script>

<style>
  #chartType{
    margin: 10px 10px 10px 10px;
    height: 240px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
  }
  #indexcolor{
    margin: 10px 10px 10px 10px;
    height: 100px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
  }
  #indexshape{
    margin: 10px 10px 10px 10px;
    height: 100px;
  }
  #lat{
    margin: 10px 10px 10px 10px;
    height: 50%;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
  }
  #index{
    padding: 10px 10px 10px 10px;
    height: 50%;
  }
  #latSelect{
    padding: 5px 10px 10px 10px;
    height: 10%;
  }
  #indexSelect{
    padding: 5px 10px 10px 10px;
    height: 10%;
  }
  #editArea{
    padding: 10px;
    height: 80%;
  }
  #mychart{
    width: 500px;
    height: 500px;
    border: 1px solid cornflowerblue;
  }
  #testChart{
    width: 500px;
    height: 500px;
    border: 1px solid cornflowerblue;
  }
  .visualEdit-content{
    height: calc(100vh - 50px);
    padding: 10px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #f4f4f5;
  }
  .visualEdit-content-left{
    width: 15%;
    display: flex;
    flex-direction: column;
  }
  .visualEdit-content-mid{
    width: 15%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(0 0 0 / 10%);
    border-top: none;
    border-bottom: none;
  }
  .visualEdit-content-mid i{
    color: cornflowerblue;
  }
  .visualEdit-content-right{
    width: 70%;
    display: flex;
    flex-direction: column;
  }
  .visualEdit-content-right i{
    color: cadetblue;
  }
  ul{
    padding: 0px;
    margin: 0px;
  }
  li{
    list-style: none;
  }
  p{
    font-size: 14px;
    margin: 0px;
  }
  .tableType{
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .tableType-list-item{
    box-sizing: border-box;
    width: 40px;
    height: 60px;
  }
  .tableType-list-item-img{
    width: 40px;
    height: 40px;
  }
  .tableType-list-item-img:hover{
    border: 1px solid cornflowerblue;
    width: 40px;
    height: 40px;
  }
  .tableType-list-item-imged{
    background-color: white;
    border: 1px solid cornflowerblue;
    box-shadow:0 0 3px #99a9bf;
    width: 40px;
    height: 40px;
  }
  .tableType-list-name{
    display: flex;
    flex-direction: column;
  }
  .tableType-list-name-item{
    height: 45px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    background-color: #f4f4f5;
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
  /*.tableType-list-item{*/
    /*display: flex;*/
    /*justify-content: space-between;*/
  /*}*/
  .tableType-list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .x-choose-list{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .x-choose-list-item{
    height: 50px;
    line-height: 50px;
    flex-direction: row;
    position: relative;
    align-items: center;
  }
  .x-choose-list-item p{
    font-size: 13px;
    margin-left: 10px;
    margin-right: 30px;
    display: inline-block;
    align-items: center;
  }
  .x-choose-list-item p:hover{
    padding: 5px 0 5px 0;
    border-radius: 5px;
    line-height: 100%;
    background-color: #d3dce6;
  }
  .x-choosed-list{
    border-radius: 3px;
    height: 50px;
    line-height: 50px;
    padding: 0px 15px 0 15px;
    text-align: center;
    background-color: white;
    padding-top: 0px;
    display: flex;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
  .x-choosed-list p:nth-child(1){
    padding-right: 15px;
    border-right: 1px solid rgb(0 0 0 / 10%);
  }.x-choosed-list i:nth-child(1){
     padding-left: 15px;
   }
  .tableType-des{
    font-size: 30%;
    border: 1px solid cornflowerblue;
    border-bottom: none;
    border-top: none;
    background-color: aliceblue;
    padding: 10px;
  }
  .tableType-des:hover{
   visibility: hidden;
  }
  .box-card{
    width: 100%;
    height: 100%;
  }
  .fans-line{
    height: 100px;
    background-color: #99a9bf;
  }
</style>

